<style lang="scss">
	page{
		background: #F5F5F5;
		// padding-top: 30upx;
		.all{
			width: 750upx;
			.jiashan{
				width: 750upx;
				height: 22upx;
				background: #F5F5F5;
			}
			.box{
				width: 690upx;
				padding: 28upx 30upx;
				display: flex;
				background: #FFFFFF;
				border-bottom: 1upx solid #F5F5F5;
				.box_text{
					width: 128upx;
					height: 44upx;
					font-size: 32upx;
					font-weight: 400;
					color: #494949;
					line-height: 44upx;
				}
				.box_input{
					width: 486upx;
					height: 44upx;
					font-size: 32upx;
					font-weight: 400;
					color: #222222;
					line-height: 44upx;
					margin-left: 60upx;
				}
				.box_image{
					width: 22upx;
					height: 32upx;
					margin-left: 10upx;
					margin-top: 10upx;
				}
			}
			.anniu{
				width: 690upx;
				height: 88upx;
				background: #1C336B;
				border-radius: 8upx;
				text-align: center;
				line-height: 88upx;
				color: #FFFFFF;
				font-size: 32upx;
				margin-left: 30upx;
				margin-top: 68upx;
			}
			.del{
				width: 108upx;
				height: 108upx;
				margin-top: 56upx;
				margin-left: 324upx;
			}
		}
	}
</style>
<template>
	<view class="all">
		<view class="box">
			<view class="box_text">收货人</view>
			<input :value="name" @input="name_input" placeholder="请输入您的真实姓名" class="box_input" />
		</view>
		<view class="box">
			<view class="box_text">手机号码</view>
			<input :value="mobile" type="number" maxlength="11" @input="mobile_input" placeholder="请输入您的手机号" class="box_input" />
		</view>
		<view class="jiashan"></view>
		<view class="box" @click="openPicker">
			<view class="box_text">省市区</view>
			<view class="box_input">{{dizhi_data}}</view>
			<image class="box_image" src="../../static/19.png"></image>
		</view>
		<view class="box">
			<view class="box_text">详细地址</view>
			<input :value="address" @input="address_input" placeholder="请输入详细地址" class="box_input" />
		</view>
		<view class="anniu" @click="anniu" v-if="address_id != ''">保存</view>
		<view class="anniu" @click="new_anniu" v-if="address_id == ''">保存</view>
		<image class="del" src="../../static/3.png" @click="del_tap"></image>
		<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
	</view>
</template>
<script>
	import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import urlConfig from '../../common/config.js';
	export default {
		components:{
			"lotus-address":lotusAddress
		},
		data() {
			return {
				address_id:'',
				list:'',
				name:'',
				mobile:'',
				province:'',
				city:'',
				region:'',
				address:'',
				default:'',
				industry_list:['123'],
				industry_data:'请选择',
				index:0,
				lotusAddressData:{
					visible:false,
					provinceName:'',
					cityName:'',
					townName:'',
				},
				dizhi_data:'请选择'
			}
		},
		onLoad(num) {
			if( !uni.getStorageSync('access_token') ) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					cancelText:'返回',
					confirmColor:'#A02731',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.reLaunch({
								url:'../disembark/disembark'
							})
						} else if (res.cancel) {
							wx.closeWindow()
						}
					}
				});
			}
			if( num.address_id ) {
				this.address_id = num.address_id
				console.log('this.address_id',this.address_id)
				this.address_detail_api()
			}
		},
		methods: {
			name_input(num) {
				this.name = num.detail.value
			},
			mobile_input(num) {
				this.mobile = num.detail.value
			},
			address_input(num) {
				this.address = num.detail.value
			},
			address_detail_api() {
				var that = this
				that.$request(that.$Api.address_detail_api, {
					access_token: uni.getStorageSync('access_token'),
					address_id:that.address_id
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.name = res.data.data.list.name
						that.mobile = res.data.data.list.phone
						that.address = res.data.data.list.address
						that.default = res.data.data.list.default
						if(res.data.data.list.province != null) {
							that.lotusAddressData.provinceName = res.data.data.list.province
							that.lotusAddressData.cityName = res.data.data.list.city
							that.lotusAddressData.townName = res.data.data.list.region
							that.province = res.data.data.list.province
							that.city = res.data.data.list.city
							that.region = res.data.data.list.region
							this.dizhi_data = res.data.data.list.province + res.data.data.list.city + res.data.data.list.region
						}else{
							this.dizhi_data = ''
							that.lotusAddressData.provinceName = '浙江省';
							that.lotusAddressData.cityName = '杭州市';
							that.lotusAddressData.townName = '余杭区';
							that.province = ''
							that.city = ''
							that.region = ''
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
				// this.lotusAddressData.provinceName = '浙江省';
				// this.lotusAddressData.cityName = '杭州市';
				// this.lotusAddressData.townName = '余杭区';
			},
			//回传已选的省市区的值
			choseValue(res){
				//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if(res.isChose){
					this.lotusAddressData.provinceName = res.province;//省
					this.lotusAddressData.cityName = res.city;//市
					this.lotusAddressData.townName = res.town;//区
					this.province = res.province;//省
					this.city = res.city;//省
					this.region = res.town;//省
					this.dizhi_data = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
			//保存
			anniu() {
				var that = this
				if(that.name != '') {
					if(that.mobile != '' && that.mobile.length == 11) {
						if(that.address != '') {
							if(that.province != '') {
								if(that.city != '') {
									if(that.region != '') {
										that.$request(that.$Api.address_save_api, {
											access_token:uni.getStorageSync('access_token'),
											address_id:that.address_id,
											name:that.name,
											mobile:that.mobile,
											province:that.province,
											city:that.city,
											region:that.region,
											address:that.address,
										}, "POST").then(res => {
											if (res.data.code == 0) {
												uni.showToast({
													title: '保存成功',
													duration: 2000,
													icon: 'none'
												});
												setTimeout(function () {
												    uni.navigateBack({
												    	delta:1
												    })
												}, 2000);
											} else {
												uni.showToast({
													title: res.data.msg,
													duration: 2000,
													icon: 'none'
												});
											}
										})
									}else{
										uni.showToast({
											title: '请选择区或县',
											duration: 2000,
											icon: 'none'
										});
									}
								}else{
									uni.showToast({
										title: '请选择市',
										duration: 2000,
										icon: 'none'
									});
								}
							}else{
								uni.showToast({
									title: '请选择省',
									duration: 2000,
									icon: 'none'
								});
							}
						}else{
							uni.showToast({
								title: '请输入详细地址',
								duration: 2000,
								icon: 'none'
							});
						}
					}else{
						uni.showToast({
							title: '请输入正确手机号',
							duration: 2000,
							icon: 'none'
						});
					}
				}else{
					uni.showToast({
						title: '请输入名字',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			//删除
			del_tap() {
				var that = this
				uni.showModal({
				    title: '删除地址',
				    content: '是否确认删除地址',
				    success: function (res) {
				        if (res.confirm) {
							that.$request(that.$Api.address_delete_api, {
								access_token: uni.getStorageSync('access_token'),
								address_id:that.address_id
							}, "POST").then(res => {
								if (res.data.code == 0) {
									uni.showToast({
										title: '删除成功',
										duration: 2000,
										icon: 'none'
									});
									setTimeout(function () {
									    uni.navigateBack({
									    	delta:1
									    })
									}, 2000);
								} else {
									uni.showToast({
										title: res.data.msg,
										duration: 2000,
										icon: 'none'
									});
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			//新增
			new_anniu() {
				var that = this
				if(that.name != '') {
					if(that.mobile != '' && that.mobile.length == 11 ) {
						if(that.address != '') {
							if(that.province != '') {
								if(that.city != '') {
									if(that.region != '') {
										var that = this
										that.$request(that.$Api.address_add_api, {
											access_token: uni.getStorageSync('access_token'),
											name:that.name,
											mobile:that.mobile,
											province:that.province,
											city:that.city,
											region:that.region,
											address:that.address,
										}, "POST").then(res => {
											if (res.data.code == 0) {
												uni.showToast({
													title: '新增成功',
													duration: 2000,
													icon: 'none'
												});
												setTimeout(function () {
												    uni.navigateBack({
												    	delta:1
												    })
												}, 2000);
											} else {
												uni.showToast({
													title: res.data.msg,
													duration: 2000,
													icon: 'none'
												});
											}
										})
									}else{
										uni.showToast({
											title: '请选择区或县',
											duration: 2000,
											icon: 'none'
										});
									}
								}else{
									uni.showToast({
										title: '请选择市',
										duration: 2000,
										icon: 'none'
									});
								}
							}else{
								uni.showToast({
									title: '请选择省',
									duration: 2000,
									icon: 'none'
								});
							}
						}else{
							uni.showToast({
								title: '请输入详细地址',
								duration: 2000,
								icon: 'none'
							});
						}
					}else{
						uni.showToast({
							title: '请输入正确手机号',
							duration: 2000,
							icon: 'none'
						});
					}
				}else{
					uni.showToast({
						title: '请输入名字',
						duration: 2000,
						icon: 'none'
					});
				}
			},
		}
	}
</script>
















